<template>
    <div class="ss-org-container">
        <splitpanes class="default-theme">
            <pane size="20" >
                <org-tree @node-click="nodeClick"/>
            </pane>
            <pane size="80">
                <a-card class="mb-2">
                    <common-form
                        :model="state.queryForm"
                        name="menu-form"
                        @query="handleQuery"
                        @add="handleAdd"
                        @reset="handleReset"
                    >
                        <a-form-item
                            label="机构名称"
                            name="name"
                            class="w-1/2.5"
                        >
                            <a-input v-model:value="state.queryForm.name"/>
                        </a-form-item>
                        <a-form-item
                            label="机构类型"
                            name="type"
                            class="w-1/3"
                        >
                            <a-select v-model:value="state.queryForm.type" placeholder="">
                                <template v-for="item in useMapDictList('org_type')" :key="item.value">
                                    <a-select-option :value="item.value">{{ item.label }}</a-select-option>
                                </template>
                            </a-select>
                        </a-form-item>
                    </common-form>
                </a-card>
                <a-card class="h-full sys-user-card-body">
                    <common-table 
                        :columns="columns" 
                        :data="state.tableData"
                        :loading="state.loading"
                        @change="changePagination"
                    >
                        <template #bodyCell="{ column, text, record }">
                            <template v-if="column.dataIndex == 'type'">
                                <template v-for="item in useMapDictList('org_type')" :key="item">
                                    <a-tag color="pink" v-if="item.value == record.type && record.type == '101' ">{{ item.label }}</a-tag>
                                    <a-tag color="red" v-if="item.value == record.type && record.type == '201' ">{{ item.label }}</a-tag>
                                    <a-tag color="orange" v-if="item.value == record.type && record.type == '301' ">{{ item.label }}</a-tag>
                                    <a-tag color="green" v-if="item.value == record.type && record.type == '401' ">{{ item.label }}</a-tag>
                                    <a-tag color="cyan" v-if="item.value == record.type && record.type == '501' ">{{ item.label }}</a-tag>
                                </template>
                            </template>
                            <template v-if="column.dataIndex === 'director'">
                                <span>{{ record.director ?record.director.realName:"" }}</span>
                            </template>
                            <template v-if="column.dataIndex == 'status'">
                                <a-tag color="green" v-if="record.status == 1">启用</a-tag>
                                <a-tag color="red" v-if="record.status == 2">禁用</a-tag>
                            </template>
                            <template v-if="column.dataIndex ==='history'">
                                <div style="cursor: pointer;">
                                    <edit-record-history :row="record"/>
                                </div>
                            </template>
                            <template v-if="column.dataIndex === 'operation'">
                                <div class="w-full">
                                    <a-button :icon="h(EditOutlined)" ghost type="primary" class="mr-1" @click="handleEdit(record)" >编辑</a-button>
                                    <a-popconfirm
                                        title="确定删除?"
                                        @confirm="handleDelete(record)"
                                    >
                                        <a-button :icon="h(DeleteOutlined)" danger >删除</a-button>
                                    </a-popconfirm>
                                </div>
                            </template>
                        </template>
                    </common-table>
                </a-card>
            </pane>
        </splitpanes>
        <edit-org ref="editOrgRef" :orgData="state.tableData" @handle-query="handleQuery"/>
    </div>
</template>

<script setup lang="ts" name="sysOrg">
// @ts-ignore
import { Splitpanes, Pane } from 'splitpanes'
import orgTree from "../org/components/orgTree.vue";
import { h, onMounted, reactive,ref } from 'vue';
import CommonForm from '@/components/common-form/index.vue'
import CommonTable from '@/components/common-table/index.vue'
import { useMapDictList } from '@/hooks';
import { apiSysOrgDeletePost, apiSysOrgListGet } from '@/api/sys/sysOrg';
import type { ResType } from '@/api/types';
import type { OrgDataType } from './type';
import editRecordHistory from '@/components/self/edit-record-history.vue';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons-vue';
import editOrg from './components/editOrg.vue';
import { showMsg } from '@/utils';

defineOptions({
    name: 'sysOrg'
})
const editOrgRef = ref<InstanceType<typeof editOrg>>()
const state = reactive({
    queryForm:{} as any,
    tableData:[] as OrgDataType[],
    loading:false,
    tenantId: undefined,
})

const columns : any[] = [
    {
        title: '序号',
        align: "center",
        customRender: ({ index }:{index:number}) => {
            return `${ index + 1 }`;
        },
        width: 60,
    },
    {
        title: '机构名称',
        dataIndex: 'name',
        key: 'name',
        align: 'center',
        width:100
    }, 
    {
        title: '机构编码',
        dataIndex: 'code',
        key: 'code',
        align: 'center',
        width:100,
        ellipsis: true
    }, 
    {
        title:'负责人',
        dataIndex: 'director',
        key: 'director',
        align: 'center',
        width:100,
    },
    {
        title: '级别',
        dataIndex: 'level',
        key: 'level',
        align: 'center',
        width:70,
        ellipsis: true
    }, 
    {
        title: '机构类型',
        dataIndex: 'type',
        key: 'type',
        align: 'center',
        width:100,
        ellipsis: true
    }, 
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        align: 'center',
        width: 120,
    },
    {
        title: '排序',
        dataIndex: 'orderNo',
        key: 'orderNo',
        align: 'center',
        width: 100,
    },
    {
        title: '修改记录',
        dataIndex: 'history',
        key: 'history',
        align: 'center',
        width: 120,
    },
    {
        title: '操作',
        align: 'center',
        key:"operation",
        dataIndex: 'operation',
        width: 150,
        fixed: 'right',
    }
]

const nodeClick = async(node: any) => {
    state.queryForm.id = node.id
	state.queryForm.name= undefined
	state.queryForm.code= undefined
	state.queryForm.type= undefined
	state.tenantId = node.tenantId;
	await handleQuery();
}

const handleQuery = async() => {
    const res = await apiSysOrgListGet(state.queryForm.id, state.queryForm.name, state.queryForm.code, state.queryForm.type)as ResType<OrgDataType[]>;
    state.tableData = res.data.result ?? []
    const addKey = (data:any[])=>{
        for (let i = 0; i < data.length; i++) {
            const item = data[i];
            item.key = item.id
            if(Array.isArray(item.children) && item.children.length > 0){
                addKey(item.children)
            }
            // 只要子项children属性不是[]，就不会有展开图标
            if(Array.isArray(item.children) && item.children.length == 0){
                Reflect.deleteProperty(item,'children')
            }
        }
    }
    addKey(state.tableData)
}
const handleAdd = async() => {
    editOrgRef.value?.handleOpen({ status: 1, orderNo: 100, tenantId: state.tenantId })
}

const handleReset = async() => {
    state.queryForm = {}
    await handleQuery()
}

const changePagination = (pagination:{current:number,pageSize:number})=>{
}

const handleEdit = (record:any) => {
    editOrgRef.value?.handleOpen({ ...record,directorName:record.director?.realName })
}

const handleDelete =async (record:any) => {
    await apiSysOrgDeletePost({id:record.id})
    await handleQuery()
    showMsg('删除成功','success')
}

onMounted(async()=>{
    await handleQuery()
})
</script>

<style lang="scss" scoped>
.sys-user-container{
    .sys-user-card-body{
        :deep(.ant-card-body){
            height: 100%;
        }
    }
}
:deep(.ant-table-cell-fix-right){
    // right: 0 !important;
}

:deep(.ant-btn >span) {
    display:inline-flex!important;
}
</style>